<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数独</title>
    <script src="logic/maps.js"></script>
    <style>
        body{
            margin: 0px;
        }
        #map{
            background-color: white;
            border: 1px solid black;
            width: 540px;
            height: 540px;
        }
        #row_1,#row_2,#row_3,#row_4,
        #row_5, #row_6, #row_7,#row_8,#row_9{
            display: flex;
        }
        .item{
            box-sizing: border-box;
            border: 1px solid black;
            width: 60px;
            height: 60px;
            background-color: #aaaaaa;
            /*text-align: center;*/
            /*line-height: 60px;*/
        }
        .tip{
            display: flex;
            flex-direction: column;
            width: 60px;
            height: 60px;
        }

        .tip_row{
            display: flex;
            height: 20px;
        }
        .tipItem{
            width: 20px;
            color: brown;
        }


        .text_center{
            text-align: center;
            line-height: 60px;
        }

        .selected_item{
            background-color: coral;
        }

        /*--------------------*/
        #btns{
            display: flex;
            margin-left: 70px;
        }
        #btns > .btn_num{
            margin: 10px;
        }

    </style>
</head>
<body>
<div id="map">
    <div id="row_1">
        <div class="item">
            <!--<div class="tip">-->
                <!--<div class="tip_row">-->
                    <!--<div class="tipItem">1</div>-->
                    <!--<div class="tipItem">2</div>-->
                    <!--<div class="tipItem">3</div>-->
                <!--</div>-->
                <!--<div class="tip_row">-->
                    <!--<div class="tipItem">4</div>-->
                    <!--<div class="tipItem">5</div>-->
                    <!--<div class="tipItem">6</div>-->
                <!--</div>-->
                <!--<div class="tip_row">-->
                    <!--<div class="tipItem">7</div>-->
                    <!--<div class="tipItem">8</div>-->
                    <!--<div class="tipItem">9</div>-->
                <!--</div>-->
            <!--</div>-->
        </div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="row_2">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="row_3">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="row_4">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="row_5">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="row_6">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="row_7">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="row_8">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div id="row_9">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

<div>
    <button id="btn_tip" style="margin-left: 250px;margin-top: 20px;margin-bottom: 10px;">提示</button>
    <div id="btns">
        <button class="btn_num">1</button>
        <button class="btn_num">2</button>
        <button class="btn_num">3</button>
        <button class="btn_num">4</button>
        <button class="btn_num">5</button>
        <button class="btn_num">6</button>
        <button class="btn_num">7</button>
        <button class="btn_num">8</button>
        <button class="btn_num">9</button>
    </div>
</div>
</body>

<script>

    class EleCell{
        constructor(cellEl,i,j){
            this.cellEl = cellEl;
            this.rowIdx = i;
            this.colIdx = j;
        }

        unselected(){
            this.cellEl.classList.remove('selected_item');
        }

        selected(){
            this.cellEl.classList.add('selected_item');
        }

        _center(){
            this.cellEl.classList.add('text_center');
        }

        _uncenter(){
            this.cellEl.classList.remove('text_center');
        }

        setValue(value){
            if(value === 0){
                this.cellEl.textContent = '';
                this._uncenter();
            }else{
                this.cellEl.textContent = value;
                this._center();
            }

        }

        getValue(){
            let content = this.cellEl.textContent.trim();
            if(content.length < 1){
                return 0;
            }
            return Number(content);
        }
    }


    let mapEl;
    let lstCell = [];
    let selectedCell = null;
    window.onload = function () {
        mapEl = document.getElementById('map');
        for(let i = 0; i < mapEl.children.length;++i){
            let rowEl = mapEl.children[i];
            lstCell[i] = [];
            for(let j = 0; j < rowEl.children.length;++j){
                let cellEl = rowEl.children[j];
                lstCell[i][j] = new EleCell(cellEl,i,j);
                cellEl.addEventListener('click',onCellClicked,false);
            }
        }

        let initBoard = window.initBoard;

        asset(initBoard.length === lstCell.length,`initBoard.length === lstCell.length`);
        asset(initBoard[0].length === lstCell[0].length,`initBoard[0].length === lstCell[0].length`);

        for(let i = 0; i < initBoard.length;++i){
            for(let j = 0; j < initBoard[0].length;++j){
                let value = initBoard[i][j];
                if(value > 0){
                    let eleCell = lstCell[i][j];
                    eleCell.setValue(value);
                }
            }
        }

        // btns
        let btns = document.getElementById('btns');
        for(let i = 0 ; i < btns.children.length;++i){
            let btn = btns.children[i];
            btn.addEventListener('click',onBtnClicked,false);
        }

        // 提示按钮
        let btnTipEl = document.getElementById('btn_tip');
        btnTipEl.addEventListener('click',onBtnTipClicked,false);
    };


    function asset(value,msg) {
        if(!value){
            throw new Error(msg);
        }
    }

    function getSelectedCell(cellEl) {
        for(let i = 0; i < lstCell.length;++i){
            for(let j = 0; j < lstCell[0].length;++j){
                if(lstCell[i][j].cellEl === cellEl){
                    return lstCell[i][j];
                }
            }
        }
    }

    //---------------------- clicked--------------
    function onCellClicked(event) {

        if(selectedCell){
            selectedCell.unselected();
        }

        selectedCell = getSelectedCell(event.target);
        selectedCell.selected();
    }

    function onBtnClicked(event) {
        let btnEl = event.target;
        let value = Number(btnEl.textContent);
        console.log(`value:${value} clicked!`);
        if(!selectedCell){
            alert(`请先选择要填入的位置`);
            return;
        }

        // 位置里面已经有值则不能再填入
        if(selectedCell.getValue() > 0){
            alert('请选择一个空的位置');
            return;
        }

        selectedCell.setValue(value);

        // 判断输入的位置是否正确
        let answerValue = window.answerBoard[selectedCell.rowIdx][selectedCell.colIdx];
        if(value !== answerValue){
            alert('答案错误!');
            selectedCell.setValue(0);
            return;
        }
    }

    function onBtnTipClicked() {

    }

</script>
</html>
